<div id="ApplicationAdmin">
    <nz-card nzTitle="Settings" class="coloredTitle">
        <form nz-form #applicationUpdateFrom="ngForm">
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Name</nz-form-label>
                <nz-form-control>
                    <input nz-input type="text" name="formApplicationUpdateName" [(ngModel)]="newName" required
                        #formApplicationUpdateName="ngModel" pattern="[a-zA-Z0-9._-]*" [disabled]="loading">
                    <nz-alert nzType="error"
                        *ngIf="formApplicationUpdateName.invalid && !formApplicationUpdateName.pristine"
                        nzMessage="Application name is mandatory and must respect the alphanumeric pattern + the following characters: .-_ ([a-zA-Z0-9._-]*)"></nz-alert>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Description</nz-form-label>
                <nz-form-control>
                    <textarea nz-input class="app-description" type="text" name="formApplicationUpdateDescription"
                        [(ngModel)]="application.description" required #formApplicationUpdateDescription="ngModel"
                        [disabled]="loading">
                    </textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Icon</nz-form-label>
                <nz-form-control>
                    <div>
                        <img class="app-icon" [src]="application.icon" alt="application icon" *ngIf="application.icon">
                    </div>
                    <app-upload-button accept=".png,.jpg,.jpeg" image="true"
                        (event)="fileEvent($event)"></app-upload-button>
                    <nz-alert *ngIf="fileTooLarge" nzType="error"
                        nzMessage="Your file is too large (max 100Ko)"></nz-alert>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item nzJustify="end">
                <button nz-button nzType="primary" [nzLoading]="loading" name="updateNameButton"
                    (click)="onSubmitApplicationUpdate()" [disabled]="loading || application.from_repository">
                    Save
                </button>
            </nz-form-item>
        </form>
    </nz-card>

    <nz-card nzTitle="Repository" class="coloredTitle">
        <app-application-repo [project]="project" [application]="application"
            [editMode]="editMode"></app-application-repo>
    </nz-card>

    <nz-card nzTitle="Integrations" class="coloredTitle">
        <ng-container *ngIf="deploymentIntegrations.length > 0">
            <app-application-deployment [project]="project" [application]="application" [editMode]="editMode"
                [deploymentIntegrations]="deploymentIntegrations"></app-application-deployment>
        </ng-container>
        <ng-container *ngIf="deploymentIntegrations.length === 0">
            <nz-alert nzType="info"
                nzMessage="There is no available integration for your application on your project"></nz-alert>
        </ng-container>
    </nz-card>

    <nz-card nzTitle="Danger zone" class="redTitle">
        <nz-row>
            <nz-col [nzSpan]="12">
                <div class="title">Delete application</div>
                <div class="description">Once you delete an application, there is no going back. Please be certain.
                </div>
            </nz-col>
            <nz-col [nzSpan]="12" class="alignRight">
                <button nz-button nzType="primary" nzDanger nz-popconfirm
                    nzPopconfirmTitle="Are you sure you want to delete this application ?" [nzLoading]="loading"
                    (nzOnConfirm)="deleteApplication()">Delete</button>
            </nz-col>
        </nz-row>
    </nz-card>
</div>